<template>
  <div class="chat-container">
    <div class="chat-header">
      <div class="header-title">
        <icon-robot class="header-icon" />
        <span>AI答疑助手</span>
      </div>
      <div class="header-desc">专业的问答平台，为你解答各类问题</div>
    </div>
    <div class="chat-messages" ref="messagesRef">
      <div
        v-for="(message, index) in messages"
        :key="index"
        class="message"
        :class="message.role"
      >
        <div class="message-content">
          <div class="avatar">
            <img
              :src="message.role === 'user' ? USER_AVATAR_URL : AI_AVATAR_URL"
              alt="avatar"
            />
          </div>
          <div class="text">
            <div class="message-text">{{ message.content }}</div>
            <div v-if="message.code" class="code-block">
              <pre><code>{{ message.code }}</code></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-input">
      <div class="input-wrapper">
        <a-textarea
          v-model="inputMessage"
          :auto-size="{ minRows: 1, maxRows: 4 }"
          placeholder="请输入你的问题，我会为你解答..."
          @keypress.enter.prevent="handleSend"
        />
        <div class="input-tools">
          <a-tooltip content="支持Markdown格式">
            <icon-file class="tool-icon" />
          </a-tooltip>
          <a-tooltip content="支持代码高亮">
            <icon-code class="tool-icon" />
          </a-tooltip>
        </div>
      </div>
      <a-button
        type="primary"
        :disabled="!inputMessage.trim()"
        @click="handleSend"
      >
        <template #icon>
          <icon-send />
        </template>
        发送
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import {
  IconRobot,
  IconFile,
  IconCode,
  IconSend
} from '@arco-design/web-vue/es/icon';

const AI_AVATAR_URL = 'http://127.0.0.1:9000/oj-files/生成机器人头像.png';
const USER_AVATAR_URL = 'http://127.0.0.1:9000/oj-files/用户头像.png';

const inputMessage = ref('');
const messagesRef = ref<HTMLElement>();

interface Message {
  role: 'user' | 'assistant';
  content: string;
  code?: string;
}

const messages = ref<Message[]>([
  {
    role: 'assistant',
    content:
      '你好！我是AI答疑助手，我可以帮你解答各类问题，包括但不限于：\n\n• 编程相关问题\n• 算法与数据结构\n• 系统设计\n• 代码优化\n• 调试与错误处理\n\n你可以这样问我：\n1. "如何实现快速排序算法？"\n2. "Vue3和Vue2有什么区别？"\n3. "如何优化这段代码的性能？"\n\n请告诉我你需要什么帮助？'
  }
]);

const scrollToBottom = async () => {
  await nextTick();
  if (messagesRef.value) {
    messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
  }
};

const handleSend = async () => {
  if (!inputMessage.value.trim()) return;

  // 添加用户消息
  messages.value.push({
    role: 'user',
    content: inputMessage.value
  });

  const userQuestion = inputMessage.value;
  inputMessage.value = '';
  await scrollToBottom();

  // TODO: 调用后端AI接口
  // 模拟AI回复
  setTimeout(() => {
    messages.value.push({
      role: 'assistant',
      content: `我理解你的问题：${userQuestion}。这是一个很好的编程问题。让我为你详细解答：`,
      code: `// 示例代码
function example() {
  // 这里将展示相关代码示例
  console.log("代码示例");
}`
    });
    scrollToBottom();
  }, 1000);
};

onMounted(() => {
  scrollToBottom();
});

// 暴露属性和方法给父组件
defineExpose({
  inputMessage,
  handleSend
});
</script>

<style scoped lang="less">
.chat-container {
  flex: 1;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chat-header {
  padding: 16px 20px;
  background: #27348c;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(39, 88, 205, 0.15);
  border-radius: 12px 12px 0 0;

  .header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;

    .header-icon {
      font-size: 28px;
    }
  }

  .header-desc {
    font-size: 14px;
    opacity: 0.9;
  }
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background-color: #f8f9fa;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-text-4);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--color-fill-2);
    border-radius: 3px;
  }
}

.message {
  margin-bottom: 20px;

  &-content {
    display: flex;
    gap: 12px;
    max-width: 85%;
  }

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .text {
    flex: 1;

    .message-text {
      padding: 14px 18px;
      background-color: #ffffff;
      border-radius: 12px;
      font-size: 14px;
      line-height: 1.6;
      color: var(--color-text-1);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      white-space: pre-wrap;
    }

    .code-block {
      margin-top: 10px;
      background-color: #1e1e1e;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      pre {
        margin: 0;
        padding: 14px;

        code {
          font-family: 'Fira Code', monospace;
          font-size: 13px;
          line-height: 1.5;
          color: #d4d4d4;
        }
      }
    }
  }

  &.user {
    display: flex;
    justify-content: flex-end;

    .message-content {
      flex-direction: row-reverse;
    }

    .text {
      .message-text {
        background: linear-gradient(135deg, #2758cd 0%, #1a3a8f 100%);
        color: #ffffff;
      }
    }
  }
}

.chat-input {
  padding: 16px 20px;
  background-color: #ffffff;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 12px;
  align-items: flex-end;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);

  .input-wrapper {
    flex: 1;
    position: relative;

    :deep(.arco-textarea-wrapper) {
      background-color: var(--color-fill-2);
      border: none;
      border-radius: 12px;
      transition: all 0.3s ease;

      &:hover,
      &:focus-within {
        background-color: var(--color-fill-3);
        box-shadow: 0 2px 8px rgba(39, 88, 205, 0.1);
      }
    }

    .input-tools {
      position: absolute;
      right: 12px;
      bottom: 12px;
      display: flex;
      gap: 8px;

      .tool-icon {
        font-size: 16px;
        color: var(--color-text-3);
        cursor: pointer;
        transition: color 0.3s ease;

        &:hover {
          color: #2758cd;
        }
      }
    }
  }

  .arco-btn {
    height: 36px;
    border-radius: 8px;
    padding: 0 20px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(39, 88, 205, 0.2);
    }

    .arco-icon {
      margin-right: 4px;
    }
  }
}
</style>
